<template>
  <div ref="QualificationAdd" class="_wz_QualificationAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate">
      <Card :bordered="true" style="margin: 10px 0px;">
        <p slot="title">选择人员</p>
        <FormItem label="选择人员" prop="driverUuid">
          <i-select v-model="formData.driverUuid" filterable placeholder="请选择人员" :disabled="!!formData.id" @on-change="userDataFun" clearable>
            <Option v-for="item in trailerList" :value="item.uuid" :key="item.uuid">{{ item.driverName }}</Option>
          </i-select>
        </FormItem>
      </Card>
      <userData :selectdata="userData"></userData>
      <Card :bordered="true" style="margin: 10px 0px;">
        <p slot="title">上传结业证</p>
        <Row>
          <i-col span="12">
            <FormItem label="第一年结业证" class="ivu-form-item-required">
              <Upload name="certificateImgFile" :before-upload="certificateImgFileFun" action="">
                <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
              </Upload>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;" v-if="!!certificateImgFile.imgUrl">
                  <img :src="certificateImgFile.imgUrl" @error="public.imgDispose">
                </viewer>
              </div>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="第二年结业证">
              <Upload name="certificateSecondImgFile" :before-upload="certificateSecondImgFileFun" action="">
                <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
              </Upload>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;" v-if="!!certificateSecondImgFile.imgUrl">
                  <img :src="certificateSecondImgFile.imgUrl" @error="public.imgDispose">
                </viewer>
              </div>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="第三年结业证">
              <Upload name="certificateThirdlyImgFile" :before-upload="certificateThirdlyImgFileFun" action="">
                <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
              </Upload>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;" v-if="!!certificateThirdlyImgFile.imgUrl">
                  <img :src="certificateThirdlyImgFile.imgUrl" @error="public.imgDispose">
                </viewer>
              </div>
            </FormItem>
          </i-col>
        </Row>
      </Card>

      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="formOperationFun">取消</Button>
        <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
      </div>
    </Form>
  </div>
</template>
<script>
  import UserData from "../employee/UserData";

  export default {

    components: {
      UserData,//人员详情
    },
    //modify 修改 add 新增
    // 需要修改的数据  表单类型  打开方式
    props: ["selectdata"],//接收来自父组件的数据
    data() {
      return {
        userData: {},
        formData: {},//表单数据
        ruleValidate: {//正则
          driverUuid: [
            {required: true, message: '请选择人员', trigger: 'blur'}
          ],
        },

        certificateImgFile: {//1图片上传
          imgUrl: null
        },
        certificateSecondImgFile: {//2图片上传
          imgUrl: null
        },
        certificateThirdlyImgFile: {//3图片上传
          imgUrl: null
        },

        trailerList: [],
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      //人员数据
      that.axios.get(that.apiUrl.basicDriverSafetyList)
      .then(res => {
        if (!!res) {
          that.trailerList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })

      if (!!!that.selectdata) {
        that.formData = {};//表单
      } else {
        that.formData = JSON.parse(JSON.stringify(that.selectdata));//表单
        //修改处理图片
        that.certificateImgFile.imgUrl = !!that.formData.certificateImg ? that.apiUrl.imgUrl + that.formData.certificateImg : null;
        that.certificateSecondImgFile.imgUrl = !!that.formData.certificateSecondImg ? that.apiUrl.imgUrl + that.formData.certificateSecondImg : null;
        that.certificateThirdlyImgFile.imgUrl = !!that.formData.certificateThirdlyImg ? that.apiUrl.imgUrl + that.formData.certificateThirdlyImg : null;

        that.userDataFun(that.formData.uuid)
      }
    },
    methods: {//执行的方法
      //第一年
      certificateImgFileFun(file) {
        var that = this;
        var type = file.type.split("/")[0];
        if (type == "image") {//图片
          that.certificateImgFile.imgUrl = window.URL.createObjectURL(file);
          that.certificateImgFile.data = file;
        } else {
          that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      //第二年
      certificateSecondImgFileFun(file) {
        var that = this;
        var type = file.type.split("/")[0];
        if (type == "image") {//图片
          that.certificateSecondImgFile.imgUrl = window.URL.createObjectURL(file);
          that.certificateSecondImgFile.data = file;
        } else {
          that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      //第三年
      certificateThirdlyImgFileFun(file) {
        var that = this;
        var type = file.type.split("/")[0];
        if (type == "image") {//图片
          that.certificateThirdlyImgFile.imgUrl = window.URL.createObjectURL(file);
          that.certificateThirdlyImgFile.data = file;
        } else {
          that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      //提交表单
      addSubmit(data) {
        var that = this;
        that.$refs[data].validate((valid) => {
          if (valid) {//正则判断使用
            var data = that.formData;
            var formData = new FormData();

            //提交处理图片
            if (!!!that.selectdata) {
              if (!!that.certificateImgFile.data) {
                formData.append('certificateImgFile', that.certificateImgFile.data);
              } else {
                that.$Message.error('请上传资质证明');
                return false;
              }
            }
            //第二年
            if (!!that.certificateSecondImgFile.data) {
              formData.append('certificateSecondImgFile', that.certificateSecondImgFile.data);
            }
            //第三年
            if (!!that.certificateThirdlyImgFile.data) {
              formData.append('certificateThirdlyImgFile', that.certificateThirdlyImgFile.data);
            }


            for (var key in data) {
              if (!!data[key]) {
                formData.append(key, data[key]);
              }
            }
            that.$Spin.show();//显示加载
            that.axios.post(that.apiUrl.safetyCertificateSaveOrUpdate, formData, {headers: {'Content-Type': "application/x-www-form-urlencoded"}})
            .then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.$Message.success("数据保存成功");
                that.$emit("closeFun", true)
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            this.$Message.error('请正确填写表单');
          }
        })
      },
      //表单关闭
      formOperationFun() {
        this.$emit("closeFun", false)
      },
      //获取人员信息
      userDataFun(e) {
        var that = this;
        if (!!e) {
          that.axios.get(that.apiUrl.driverInfo + e)
          .then(res => {
            if (!!res) {
              that.userData = res.data.data;
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          that.userData = {};
        }


      },
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_QualificationAdd {
    .ivu-input[disabled], .ivu-select-input[disabled] {
      /*background: #fff !important;*/
      color: #666;
      -webkit-text-fill-color: #666;
    }

    .demo-drawer-footer {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      text-align: right;
      background: #fff;
    }

    .demo-upload-list {
      display: inline-block;
      width: 200px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          color: #fff;
          font-size: 40px;
          cursor: pointer;
          margin: 0 2px;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }
  }


</style>
